<template>
	<view class="content">
		<view class="title">
			<view v-for="(item,index) in options" class="item-title" :class="ischeck === index?'ischeck':''" @click="change(index)">{{item.value}}</view>
		</view>
		<view style="padding: 20upx;">
			<view v-if="list.length === 0" style="text-align: center;color: #999;size: 20px;line-height: 100px;">当前暂无订单！</view>
			<view class="order-item-list" v-for="(item,index) in list" :key="index">
				<view class="box">
					<view class="order-status">
						<span style="color: #D7000F" v-if="item.status==3">已取消</span>
						<span style="color: #D7000F" v-else-if="item.status==1&&item.payStatus==1">待付款</span>
						<span style="color: #D7000F" v-else-if="item.status===1&&item.payStatus===2&&item.shipStatus==1&&item.aftersaleStatus === 0">待发货</span>
						<span style="color: #D7000F" v-else-if="item.status==1&&item.payStatus==2&&item.shipStatus==3&&item.aftersaleStatus === 0">待收货</span>
						<span style="color: #D7000F" v-else-if="item.aftersaleStatus === 1 || item.aftersaleStatus === 2">正在售后</span>
						<span style="color: #D7000F" v-else-if="item.aftersaleStatus === 3">售后完成</span>
						<span style="color: #D7000F" v-else="item.status===2&&item.aftersaleStatus === 0">已完成</span>
					</view>
				</view>
				<view v-for="(orderItem,orderindex) in item.orderProductItems" :key="orderindex">
					<view class="pox" @click="toOrderdetail(item.orderId)">
						<img class="img" :src="orderItem.imageUrl" />
						<view style="margin-left: 20upx;flex: 1;">
							<view class="name">{{orderItem.name}}</view>
							<view class="name" style="color: #666;">{{orderItem.spesDesc}}</view>
							<view class="operation">
								<view>¥{{orderItem.price}}</view>
								<view>x{{orderItem.nums}}</view>
							</view>
						</view>
					</view>
					<view style="padding-bottom: 20upx;border-bottom: 2upx solid #E6E6E6;display: flex;justify-content: flex-end;">
						<button class="white-btn" v-if="item.status==2&&item.payStatus==2&&item.shipStatus==3&&orderItem.isComment==1"
						 @click="jumpCommentPage(orderItem)">评价晒单
						</button>
						<button class="red-btn" v-if="item.status!==3&&item.payStatus!==1&&item.confirm!==2 && orderItem.afterSalesStatus === 4"
						 @click="severApply(item.orderId,orderItem)">
							申请售后
						</button>
					</view>
				</view>
				<view style="padding: 20upx 10upx 0 10upx;display: flex;align-items: center;">
					<text style="flex: 1;">订单金额：¥{{item.orderAmount}}</text>
					<view class="whole">
						<button class="white-btn" v-if="item.status==1&&item.payStatus==1" @click="cancelOrder(item.orderId)">取消订单</button>
						<button class="white-btn" v-if="item.status==3" @click="delOrder(item.orderId)">删除订单</button>
						<button class="red-btn" v-if="item.status===1&&item.payStatus==1" @click="pay(item)">去支付</button>
						<button class="red-btn" v-if="item.status==1&&item.payStatus==2&&item.shipStatus==3&&item.confirm==1" @click="confirmReceipt(item.orderId)">确认收货</button>
					</view>
				</view>
			</view>
		</view>
		<view>
		</view>
	</view>
	</view>
</template>

<script>
	var _self, page = 1,
		timer = null;
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				id: '',
				orderId: '',
				productId: '',
				userId: '',
				limit: 10,
				list: [],
				orderProductItems: [],
				ischeck: 0,
				memo: '',
				goodsId: '',
				options: [{
					value: "全部"
				}, {
					value: "待付款"
				}, {
					value: "待发货"
				}, {
					value: "待收货"
				}, {
					value: "待评价"
				}, {
					value: "已完成"
				}],
				price: '',
				loadingText: '加载中...'
			}
		},
		onLoad() {
			_self = this;
			this.getOrderList()
		},
		onPullDownRefresh() {
			this.getOrderList()
		},
		onReachBottom: function() {
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				_self.getmorenews();
			}, 1000);
		},
		methods: {
			getOrderList(status, payStatus, shipStatus, confirm, isComment) {
				try {
					this.userId = uni.getStorageSync('userId')
					page = 1
					uni.showNavigationBarLoading();
					const params = {
						userId: this.userId,
						page: page,
						limit: this.limit
					}
					if (status) {
						params.status = status
					}
					if (payStatus) {
						params.payStatus = payStatus
					}
					if (shipStatus) {
						params.shipStatus = shipStatus
					}
					if (confirm) {
						params.confirm = confirm
					}
					if (isComment) {
						params.isComment = isComment
					}
					post('mobileapi/mobile/member/usercenter/getOrderListByUserId', params).then(res => {
						this.list = res.page.list
						page++;
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
						_self.loadingText = '加载更多';
					})
				} catch (e) {}
			},
			toOrderdetail(orderId) {
				uni.navigateTo({
					url: "/pages/myOrder/order-detail?orderId=" + orderId
				})
			},
			//取消订单
			cancelOrder(orderId) {
				try {
					this.orderId = orderId
					let params = {
						id: this.orderId
					}
					post('mobileapi/mobile/order/cancelOrder', params).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '取消订单成功',
							});
							this.getOrderList()
						}
					})
				} catch (e) {}
			},
			//删除订单
			delOrder(orderId) {
				try {
					this.orderId = orderId
					let params = {
						orderId: this.orderId
					}
					post('mobileapi/mobile/order/delOrder', params).then(res => {
						if (res.code == 0) {
							this.getOrderList()
						}
					})
				} catch (e) {}
			},
			//确认收货
			confirmReceipt(orderId) {
				try {
					const params = {
						orderId: orderId
					}
					post('mobileapi/mobile/order/confirmReceipt', params).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '收货成功'
							}, 1000)
							this.getOrderList()
						}
					})
				} catch (e) {}
			},
			//评价晒单
			jumpCommentPage(orderItem) {
				uni.navigateTo({
					url: '/pages/evaluate/index?id=' + orderItem.id + "&name=" + orderItem.name + '&imageUrl=' +
						orderItem.imageUrl + "&price=" + orderItem.price +
						"&nums=" + orderItem.nums + "&spesDesc=" + orderItem.spesDesc
				})
			},
			pay(item) {
				uni.navigateTo({
					url: "/pages/pay/index?orderId=" + item.orderId + '&total=' + item.orderAmount
				})
			},
			severApply(orderId, orderItem) {
				uni.navigateTo({
					url: "/pages/aftersale/after-apply/after-apply?orderId=" + orderId + '&name=' + orderItem.name + '&imageUrl=' +
						orderItem.imageUrl + "&price=" + orderItem.price +
						"&nums=" + orderItem.nums + "&spesDesc=" + orderItem.spesDesc + "&id=" + orderItem.id
				})
			},
			change(index) {
				this.ischeck = index
				switch (index) {
					case 0:
						this.getOrderList()
						break
					case 1:
						this.getOrderList(1, 1)
						break
					case 2:
						this.getOrderList(1, 2, 1)
						break
					case 3:
						this.getOrderList(1, 2, 3, 1)
						break
					case 4:
						this.getOrderList(2, 2, 3, 2, 1)
						break
					case 5:
						this.getOrderList(2)
						break
				}
			},
			getmorenews(status, payStatus, shipStatus, confirm, isComment) {
				if (_self.loadingText != '' && _self.loadingText != '加载更多') {
					return false;
				}
				_self.loadingText = '加载中...';
				uni.showNavigationBarLoading();
				const params = {
					userId: this.userId,
					page: page,
					limit: this.limit
				}
				if (status) {
					params.status = status
				}
				if (payStatus) {
					params.payStatus = payStatus
				}
				if (shipStatus) {
					params.shipStatus = shipStatus
				}
				if (confirm) {
					params.confirm = confirm
				}
				if (isComment) {
					params.isComment = isComment
				}
				post('mobileapi/mobile/member/usercenter/getOrderListByUserId', params).then(res => {
					_self.loadingText = '';
					if (res.page == null) {
						uni.hideNavigationBarLoading();
						_self.loadingText = '已加载全部';
						uni.showToast({
							title: '已加载全部'
						})
						return false;
					}
					page++;
					for (let i = 0; i < res.page.list.length; i++) {
						_self.list.push(res.page.list[i])
					}
					_self.loadingText = '加载更多';
					uni.hideNavigationBarLoading();
				})
			},
		}
	}
</script>

<style>
	.content {
		font-size: 28upx;
	}

	.title {
		margin-top: 20upx;
		display: flex;
	}

	.item-title {
		margin: auto;
		line-height: 50upx;
	}

	.order-item-list {
		border-radius: 10upx;
		padding: 20upx;
		background: #ffffff;
		margin-bottom: 20upx;
	}

	.box {
		text-align: right;
		border-bottom: 2upx solid #E6E6E6;
		padding: 0upx 20upx 16upx 20upx;
	}

	.img {
		width: 180upx;
		height: 180upx;
	}

	.pox {
		padding: 20upx 0;
		display: flex;
	}

	.operation {
		display: flex;
		justify-content: space-between;
		margin: 10upx 0;
	}

	.red-btn {
		font-size: 24upx;
		background: #D7000F;
		color: #FFFFFF;
		width: 180upx;
	}

	.white-btn {
		font-size: 24upx;
		margin-right: 20upx;
		width: 180upx;
	}

	.whole {
		display: flex;
		justify-content: flex-end;
	}

	.ischeck {
		color: #D7000F;
		border-bottom: 4upx solid #D7000F;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: 70upx;
		line-height: 30upx;
	}
</style>
